<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link href="style/common.css" rel="stylesheet" type="text/css">
    <title></title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>

<div class="shadow">
    <img id="photo" src="photo/1.jpg"/>
    <img id="close" src="close.jpg"/>
    <div id="navigator">
        <span id="prev"><< 上一幅</span><span id="next">下一幅 >></span>
    </div>
</div>
<script>
    var currentidx;//当前在shadow中显示的图片下标
/**
 * 把下标为idx的图片显示到shadow
 * @idx 下标
 * @node 下表为idx的img的queryobject.
 * */
    function extracted(idx,node) {
        $("#photo").attr({"src": "photo/" + (idx+1) + ".jpg"});
        if (node.hasClass("pt")) {
            $("#photo").removeClass("photols");
            $("#photo").addClass("photopt");
        } else {
            $("#photo").removeClass("photopt");
            $("#photo").addClass("photols");
        }
    }

    $(document).ready(function () {
        for (var i = 1; i <= 30; i++) {
            var node = $("<img src='photo/thumb/" + i + ".jpg'/>");
            $("body").append(node);
        }
        $("img").not(".shadow img").click(function(){
            var idx=$("img").not(".shadow img").index(this);
            extracted(idx,$(this));
            $(".shadow").show(2000);
            currentidx=idx;

        });
        $("#close").click(function(){
            $(".shadow").hide();
        });

        $("#prev").click(function(){
            currentidx=(currentidx+29)%30;
            extracted(currentidx,$("img").not(".shadow img").eq(currentidx));
        });
        $("#next").click(function(){
            currentidx=(currentidx+1)%30;
            extracted(currentidx,$("img").not(".shadow img").eq(currentidx));
        });

    });
    $(window).load(function () {
        var imgs=$("img").not(".shadow img");
        for (var i = 0; i < imgs.length; i++) {
            var node= imgs.eq(i);
            var h =node.height();
            var w = node.width();
            console.log(h + ":" + w);
            if (h > w) {
                node.addClass("pt");
            } else {
                node.addClass("ls");
            }
        }
    });
  /*  $(document).ready(function () {
        for (var i = 1; i <= 30; i++) {
            var node = $("<div class='d'><img src='photo/thumb/" + i + ".jpg'/></div>");
            $("body").append(node);
        }
    });

    $(window).load(function () {
        for (var i = 0; i < 30; i++) {
            var h = $("img").eq(i).height();
            var w = $("img").eq(i).width();
            console.log(h + ":" + w);
            if (h > w) {
                $("div").eq(i).addClass("pt");
            } else {
                $("div").eq(i).addClass("ls");
            }
        }
    });*/
</script>
</body>
</html>